<template>
  <div v-if="pointAuth">
    <page-header
      :title="$t('m.point')"
      :has-return="false"
      :content1="$t('m.rewardPointTotal') + ': ' + $format.numberFormat(total)"
    ></page-header>

    <div class="container">
      <div class="box_index">
        <!-- 表格栏 -->
        <div class="table-box">
          <!--表格-->
          <fast-table :options="fastTableOptions" :data="page" />
        </div>
      </div>
    </div>

    <!-- 编辑奖励积分值 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="editDialog"
      :title="$t('m.Edit_reward_point_values')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Enter_reward_point_value') }}
        </div>
        <div class="dialog_content3">
          <el-form
            style="width:100%"
            ref="editItem"
            :model="editItem"
            :rules="rules"
          >
            <el-form-item prop="point">
              <el-input
                v-model="editItem.point"
                :placeholder="$t('m.Please_enter')"
                maxlength="9"
                @input="changePoint"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="editBtn" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FastTable from '@/components/fast-table.vue'

export default {
  components: { FastTable },
  data () {
    return {
      // 表格options
      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.Reward_name'),
            prop: 'title',
            formatter: row => this.$format.langFormat(row.title),
            showOverflowTooltip: true
          },
          {
            label: this.$t('m.Order_description'),
            prop: 'description',
            formatter: row => this.$format.langFormat(row.description),
            showOverflowTooltip: true
          },
          { label: this.$t('m.point'), prop: 'point' },
          {
            label: this.$t('m.Accumulated_reward_times'),
            prop: 'totalRewardCount'
          },
          {
            label: this.$t('m.Accumulated_reward_point_value'),
            prop: 'totalRewardPoint'
          },
          {
            label: this.$t('m.status'),
            prop: 'state',
            switch: true,
            activeValue: 1,
            inactiveValue: 0,
            switchChange: this.editState
          },
          {
            label: this.$t('m.branch_Creationdate'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          },
          // 操作列
          {
            operate: true,
            showcolumn: this.permissionsId(200),
            // 按钮展示方式： tile-平铺（默认展示方式）, dropdown-下拉
            display: 'tile',
            actions: [
              {
                label: this.$t('m.branch_Edit'),
                permission: row => true,
                click: this.editPoint
              }
            ]
          }
        ]
      },

      total: 0,

      editDialog: false,
      editItem: {
        point: '',
        id: ''
      },
      rules: {
        point: [
          {
            required: true,
            message: this.$t('m.Enter_reward_point_value'),
            trigger: 'blur'
          }
        ]
      },
      page: [],
      pointAuth: this.permissionsId(89),
      editAuth: this.permissionsId(201)
    }
  },
  created () {
    if (!this.pointAuth) {
      return
    }
    this.getTotal()
    this.getPage()
  },
  methods: {
    getTotal () {
      this.$api.point.getPointsTotal().then(res => {
        if (this.$ok(res)) {
          this.total = res.data
        }
      })
    },
    getPage () {
      this.$api.point.getPointRecords(this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },
    changePoint(val){
      this.editItem.point = this.$check.noZero(val)
    },    
    editPoint (item) {
      this.editItem = {
        point: item.point,
        id: item.id
      }
      this.editDialog = true
    },
    // 修改积分
    editBtn () {
      this.$refs.editItem.validate(valid => {
        if (valid) {
          this.$api.point.modifyPoint(this.editItem).then(res => {
            if (this.$ok(res)) {
              this.editDialog = false
              this.$message.success(res.message)
              this.getPage()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 修改状态
    editState (item) {
      if (!this.editAuth) {
        return
      }
      this.editItem = {
        state: item.state == 1 ? 0 : 1,
        id: item.id
      }
      this.$api.point.modifyState(this.editItem).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getPage()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
